<template>
    <Card>
        <p slot="title">
            <Icon type="plus-round"></Icon>
            {{districtTitle}}
        </p>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100"
              style="width:500px; padding-top:20px;">
            <FormItem label="用户名称" prop="brand_name">
                <Input v-model="formValidate.brand_name" :disabled="districtKey=='check'"
                       @on-focus="user_district = true" placeholder="选择用户"/>
            </FormItem>
            <FormItem label="区域名称" prop="district_name">
                <Input v-model="formValidate.district_name" placeholder="请输入区域名称" :disabled="districtKey=='check'"/>
            </FormItem>
            <FormItem label="地区选择" prop="district_name">
                <procity-checkbox :node-click="isClick" :city-node.sync="checkTreeData"></procity-checkbox>
            </FormItem>
            <FormItem label="状态" prop="status">
                <RadioGroup v-model="formValidate.status">
                    <Radio label="1" :disabled="districtKey=='check'">启用</Radio>
                    <Radio label="2" :disabled="districtKey=='check'">禁用</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem>
                <Button type="primary" v-if="districtKey!='check'" @click="handleSubmit('formValidate')">提交</Button>
                <Button style="margin-left:10px;" @click="$router.back()">返回</Button>
            </FormItem>
        </Form>
        <Modal
                v-model="user_district"
                title="请选择用户"
                width="1000px"
                footer-hide>
            <div style="margin-bottom: 10px">
                <Input v-model="user_name" placeholder='用户名称' style="width: 300px"/>
                <Button type='primary' @click='userSearch'>搜索</Button>
            </div>
            <i-table border :columns="user_columns" :data="user_data"></i-table>
            <Page :total="total_count" :current="page" style="margin-top:10px;"
                  @on-change="page_user_change"></Page>
            <div slot="footer"></div>
        </Modal>
    </Card>
</template>

<script>
    import provincecitycheckbox from '@/views/my-components/ProvinceCitysCheckbox.vue';

    export default {
        components: {
            'procity-checkbox': provincecitycheckbox
        },
        props: {
            districtTitle: [String],
            districtId: [String],
            districtKey: [String]
        },
        data () {
            return {
                page: 1,
                pre_page: 10,
                total_count: 15,
                user_name: '', //选择用户
                user_district: false,
                checkTreeData: [],
                isClick: true,
                formValidate: {
                    brand_name: '',
                    district_name: '',
                    status: '1',
                },
                user_columns: [
                    {
                        title: '用户名',
                        key: 'user_name',
                        align: 'center'
                    },
                    {
                        title: '手机号',
                        key: 'user_phone',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {}, '选择')
                            ]);
                        }
                    }
                ],
                ruleValidate: {
                    brand_name: [
                        {
                            required: true,
                            message: '用户名称不能为空',
                            trigger: 'blur'
                        }
                    ],

                    district_name: [
                        {
                            required: true,
                            message: '区域名称不能为空',
                            trigger: 'blur'
                        }
                    ],
                    status: [
                        {required: true, message: '请选择区域状态', trigger: 'change'}
                    ],
                },
                id: ''
            };
        },
        created () {
            this.id = this.districtId;
            this.isClick = (this.districtKey != 'check') ? true : false;
        },
        methods: {
            page_user_change (val) {
                this.page = val;
            },
            /**--选择用户搜索----*/
            userSearch () {

            },

            /**----提交-----*/
            handleSubmit (name) {

            }
        }
    };
</script>
